<template>
	<view class="service-detail">
		<!-- 服务信息 -->
		<uni-card :title="service.title">
			<!-- 多媒体内容 -->
			<view class="media-content">
				<image v-if="service.image_url" :src="service.image_url" mode="widthFix" class="service-image" />
				<video v-if="service.video_url" :src="service.video_url" class="service-video" />
				<audio v-if="service.audio_url" :src="service.audio_url" controls />
			</view>

			<!-- 服务描述 -->
			<view class="description">
				<text>{{service.description}}</text>
			</view>
		</uni-card>

	</view>
</template>

<script>
	import request from '@/utils/request.js'

	export default {
		data() {
			return {
				service: {},
				ratingList: [],
				canRate: false,
				newRating: {
					rating: 5,
					comment: ''
				}
			}
		},

		onLoad(options) {
			const serviceId = options.id
			this.getServiceDetail(serviceId)
		},

		methods: {
			// 获取服务详情
			async getServiceDetail(id) {
				try {
					const res = await request({
						url: `/services/${id}`,
						method: 'GET'
					})

					if (res.data.status === 'success') {
						this.service = res.data.data.service
					}
				} catch (e) {
					console.error('获取服务详情失败:', e)
				}
			},

			// 获取评价列表
			async getRatingList(serviceId) {
				try {
					const res = await request({
						url: '/ratings',
						method: 'GET',
						data: {
							service_id: serviceId
						}
					})
					if (res.data.status === 'success') {
						this.ratingList = res.data.data
						// 检查当前用户是否可以评价
						this.checkCanRate()
					}
				} catch (e) {
					console.error('获取评价列表失败:', e)
				}
			},

			// 检查是否可以评价
			checkCanRate() {
				const userId = uni.getStorageSync('userId')
				const hasRated = this.ratingList.some(rating => rating.user_id === userId)
				this.canRate = !hasRated
			},

			// 提交评价
			async submitRating() {
				try {
					const res = await request({
						url: '/ratings',
						method: 'POST',
						data: {
							...this.newRating,
							service_id: this.service.id
						}
					})
					if (res.data.status === 'success') {
						uni.showToast({
							title: '评价成功'
						})
						// 刷新评价列表
						this.getRatingList(this.service.id)
					}
				} catch (e) {
					uni.showToast({
						title: '评价失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.service-detail {
		.media-content {
			.service-image {
				width: 100%;
				border-radius: 8rpx;
			}

			.service-video {
				width: 100%;
				height: 400rpx;
			}
		}

		.description {
			margin: 20rpx 0;
			font-size: 28rpx;
			color: #333;
		}

		.rating-list {
			.rating-item {
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #eee;

				.rating-header {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.username {
						margin-right: 20rpx;
						font-size: 28rpx;
						color: #666;
					}
				}

				.rating-content {
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.add-rating {
			margin-top: 30rpx;
			padding-top: 20rpx;
			border-top: 1px solid #eee;

			button {
				margin-top: 20rpx;
			}
		}
	}
</style>